<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" href="css/head.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"  href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}" href="css/footer.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/account-information.css}" href="css/account-information.css" />
    <link rel="stylesheet" th:href="@{/administration/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/shopping-order.css}" href="css/shopping-pay.css" />
    <script th:src="@{/js/jquery-3.3.1.min.js}" src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/administration/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        body{color:#666;font:12px/1.5 Arial;}
        /* star */
        #star{position:relative;width:600px;margin:20px auto;height:24px;}
        #star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
        #star ul{margin:0 10px;}
        #star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url('../img/star.png') no-repeat;}
        #star strong{color:#f60;padding-left:10px;}
        #star li.on{background-position:0 -28px;}
        #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url('../img/icon.gif') no-repeat;padding:7px 10px 0;}
        #star p em{color:#f60;display:block;font-style:normal;}
    </style>
</head>

<body>
<div th:replace="head::topbar"></div>
<div class="account-bg">
    <div class="container clearfix">
        <div class="account-tit">
            <a href="/customer/person_center">首页</a>
            <span class="icon-righthollo"></span>
            <span>订单详情</span>
        </div>
        <div class="w-panelfoot">
            <div class="information">
                <div class="Commodity-information" style="width:100%">
                    <div class="w-w2 fl">
                        <span class="all fl">商品信息</span>
                        <div class="clear"></div>
                    </div>
                    <div class="w-w3 fl">
                        <span class="all">单价</span>
                    </div>
                    <div class="w-w4 fl">
                        <span class="all">数量</span>
                    </div>
                    <div class="w-w6 fr">
                        <span class="all fl">商品邮费</span>
                        <div class="clear"></div>
                    </div>
                    <div class="w-w5 fr">
                        <span class="all fr">小计</span>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <ul id="listUl" class="cart-grouplist">
                <li id="cartLi">
                    <div class="list-list" th:each="history : ${histories}">
                        <div class="photo fl">
                            <img th:src="${history.getImgSrc()}"/>
                        </div>
                        <!--                <input th:id="${historyIndent.getProduct().getProductId()}" type="hidden" th:value="${historyIndent.getProduct().getProductYoufei()}"/>-->
                        <div class="nameCon fl" style="margin-left: 22px;">
                            <p title="高清投影仪" class="sleep-yi" href="#" th:text="${history.getProductName()}">高清投影仪</p>
                            <div class="color">
                                <a title="便携带  白色" href="#">便携带  白色</a>
                            </div>
                        </div>
                        <span class="pricea fl">￥</span>
                        <span class="priceb fl" th:text="${history.getProductPrice()}">799.00</span>
                        <div class="u-selnum fl">
                            <span class="reduction fl" th:text="${history.getProductCount()}">1</span>
                            <div class="clear"></div>
                        </div>
                        <span class="price11 fl" style="margin-left:160px">￥</span>
                        <span class="price1 fl" th:text="${history.getProductPrice()}*${history.getProductCount()}">799.00</span>
                        <div class="move-del fl">
                            <span class="pricec fl">￥</span>
                            <span  class="priced fl postAge" th:text="${history.getProductPostage()}">7999.00</span>
                            <div class="clear"></div>
                        </div>

                        <div style="position: absolute;margin-top: 70px;margin-left: 415px" id="star">
                            <input id="scoreValue" type="hidden" th:value="${history.getCommentScore()}">
                            <i style="display: none" >[[${history.getProductId()}]]</i>
                            <strong style="display:none;">[[${history.getComment().getCommentId()}]]</strong>
                            <span>商品评分</span>
                            <ul>
                                <li><a href="javascript:;">1</a></li>
                                <li><a href="javascript:;">2</a></li>
                                <li><a href="javascript:;">3</a></li>
                                <li><a href="javascript:;">4</a></li>
                                <li><a href="javascript:;">5</a></li>
                            </ul>
                            <span></span>
                            <p></p>
                        </div><!--star end-->

                        <div class="clear"></div>
                    </div>
                </li>
            </ul>
            <div class="m-itemInfort">
                <div class="right-itemInfort fr">
                    <div class="goods-together">
                        <span class="goods-together-name">商品合计    ：</span>
                        <span class="goods-together-name-n">￥</span>
                        <span class="goods-together-name-price" th:text="${indent.getIndentPrice()}" id="xiaoji">1198.00</span>

                    </div>
                    <div class="goods-freight">
                        <span class="goods-freight-fre">运费    ：</span>
                        <span class="goods-freight-m">￥</span>
                        <span class="goods-freight-pic" id="postPrice1">0.00</span>
                    </div>
                    <div class="lin-4">
                        <span class="money">应付总额    ：</span>
                        <span class="xing">￥</span>
                        <span class="money-mon"  id="totalPrice">1198.00</span>
                    </div>
                    <div class="row">
                        <div class="col-md-8"></div>
                        <div class="col-md-4"><button type="button" id="cancel" class="btn btn-danger" onclick="javascript:history.back(-1);" style="color:#fff;">取消</button></div>
                    </div>

                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer::#footbar"></div>
<script th:src="@{/layer-v3.1.1/layer/layer.js}" src="layer-v3.1.1/layer/layer.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        //底部侧边栏关闭
        $(".icon-sidebarx").click(function() {
            $(this).parents(".sidebar-b-bac").remove();
        });
        //右边侧边栏关闭
        $(".icon-subx").click(function() {
            $(this).parents(".sub-list").css("display", "none");
        });
        //右边hover弹窗input隐藏出现
        $(".sub-inputbox").click(function() {
            $(this).prev(".icon-inputx").css("opacity", 1);
        });
        //下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if(top > 200) {
                $(".sidebar-r-totop").css({
                    display: 'block'
                });
                $(".navigation-fix").slideDown();
            } else {
                $(".sidebar-r-totop").css({
                    display: 'none'
                });
                $(".navigation-fix").slideUp();
            }
        });
        //点击回到顶部，回到顶部
        $(".sidebar-r-totop").click(function() {
            $("html,body").animate({
                scrollTop: 0
            }, 500);
        });

    })

    window.onload=function (){
        var postPrice=0.0;
        $(".postAge").each(function () {
            postPrice +=parseFloat($(this).text());
        })
        $('#postPrice1').text(postPrice);
        var postPrice1 = parseFloat($('#postPrice1').text());
        var xiaoji = parseFloat($('#xiaoji').text());
        var totalPrice = postPrice1 + xiaoji;
        $('#totalPrice').text(parseFloat(totalPrice));
    }
</script>

<script type="text/javascript" th:inline="javascript">
    window.onload = function (){
        var aMsg = [
            "商品|暂无评价，期待您的好评",
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ]
        $("#listUl").children("li").children('div').find('input').each(function () {
            var oStar = $(this).parent('div');
            var aLi = oStar.find("li");
            var oUl = oStar.find("ul")[0];
            var oSpan = oStar.find("span")[1];
            var oP = oStar.find("p")[0];
            var i = iScore = iStar = 0;
            var productId =  $(this).next().text()
            var commentId = $(this).next().next().text()
            initial(this.value)

            for (i = 1; i <= aLi.length; i++){
                aLi[i - 1].index = i;

                //鼠标移过显示分数
                aLi[i - 1].onmouseover = function (){
                    fnPoint(this.index);
                    //浮动层显示
                    oP.style.display = "block";
                    oSpan.style.display = "none"
                    //计算浮动层位置
                    oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
                    //匹配浮动层文字内容
                    oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
                };

                //鼠标离开后恢复上次评分
                aLi[i - 1].onmouseout = function (){
                    fnPoint();
                    //关闭浮动层
                    oP.style.display = "none"
                    window.location.reload()
                };
                //



                //点击后进行评分处理
                aLi[i - 1].onclick = function (){
                    iStar = this.index;
                    oP.style.display = "none";
                    oSpan.style.display = "block"
                    oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index].match(/\|(.+)/)[1] + ")"
                    // alert(this.index)
                    $.ajax({
                        url: "/indent/updateCommentScore?commentScore="+this.index+ "&productId=" + productId+"&commentId="+commentId,
                        method: 'GET',
                        traditional: true,
                        success: function (json) {
                        }
                    });
                }
            }
            //评分处理
            function fnPoint(iArg){
                //分数赋值
                iScore = iArg || iStar;
                for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
            }

            function initial(initalNum){
                fnPoint(initalNum)  //后台取值
                // oSpan.style.display = "block"
                // if(initalNum == 0){
                //     initalNum ++
                // }
                oSpan.innerHTML = "<strong>" + (initalNum) + " 分</strong> (" + aMsg[initalNum].match(/\|(.+)/)[1] + ")"  //后台取值
            }
            // alert(this.value)
        })


    };
</script>


</body>

</html>